<template>
    <a-drawer popup-container="#wrap" width="500px" :visible="show" :ok-loading="form.loading" @ok="submit" @cancel="show = false" unmountOnClose>
        <template #title>
            {{$t('components.create.60zecmbl56w0')}}
        </template>
        <div class="table-info">
            <a-form ref="formRef" :model="form.data" @submit="submit" layout="vertical">
                <a-form-item field="districtId" :label="$t('components.create.60zecmbl7o00')" :rules="[{ type:'array', required: true, message: '请输入所在城市' }]">
                    <a-cascader path-mode v-model="form.data.districtId" :options="regionData"  :placeholder="$t('components.create.60zecmbl7y40')" />
                </a-form-item>
                <a-form-item field="name" :label="$t('components.create.60zecmbl84c0')" :rules="[{ required: true, message: $t('components.create.60zecmbl8as0') }]">
                    <a-input v-model="form.data.name" :placeholder="$t('components.create.60zecmbl8as0')" />
                </a-form-item>
                <a-form-item field="groupId" :label="$t('components.create.60zecmbl8ew0')" :rules="[{ required: true, message: $t('components.create.60zecmbl8jw0') }]">
                    <a-select :placeholder="$t('components.create.60zecmbl8jw0')" v-model="form.data.groupId">
                        <a-option v-for="item in temp.deviceGroupList" :value="item.id">{{ item.name }}</a-option>
                    </a-select>
                </a-form-item>
                <a-form-item field="mac[0]" :label="$t('components.create.60zen04svm81')" :rules="[{ required: true,match:/^([0-9a-f]{2}:){5}[0-9a-f]{2}$/, message: $t('components.create.60zecmbl8as1') }]">
                    <a-input v-model="form.data.mac[0]" :placeholder="$t('components.create.60zecmbl8as1')" />
                </a-form-item>
                <a-form-item field="mac[1]" :label="$t('components.create.60zen04svm82')" :rules="[{ required: true,match:/^([0-9a-f]{2}:){5}[0-9a-f]{2}$/, message: $t('components.create.60zecmbl8as1') }]">
                    <a-input v-model="form.data.mac[1]" :placeholder="$t('components.create.60zecmbl8as1')" />
                </a-form-item>
                <a-form-item field="mac[2]" :label="$t('components.create.60zen04svm83')" :rules="[{ required: true,match:/^([0-9a-f]{2}:){5}[0-9a-f]{2}$/, message: $t('components.create.60zecmbl8as1') }]">
                    <a-input v-model="form.data.mac[2]" :placeholder="$t('components.create.60zecmbl8as1')" />
                </a-form-item>
                <a-form-item field="type" :label="$t('components.create.60zecmbl8xk0')">
                    <a-input v-model="form.data.type" :placeholder="$t('components.create.60zecmbl94o0')" />
                </a-form-item>
                
                <a-form-item field="point" :label="$t('components.create.60zecmbl98w0')" :rules="[{ required: true, message: $t('components.create.60zehwan9a81') }]">
                    <a-select v-model="form.data.point" :loading="form.point.loading" :placeholder="$t('components.create.60zehwan9a81')" @search="searchPoint" :filter-option="false" allow-search>
                        <a-option v-for="item of form.point.list" :value="item.id">{{item.name}}</a-option>
                    </a-select>
                </a-form-item>
                <a-form-item field="radius" :label="$t('components.create.60zecmbl9qw0')" v-model="form.data.radius"
                    :rules="[{ type: 'number', min: 0 }]">
                    <a-input-number v-model="form.data.radius" :placeholder="$t('components.create.60zecmbl9mc0')">
                        <template #suffix>
                            {{$t('components.create.60zecmbl9qw0')}}
                        </template>
                    </a-input-number>
                </a-form-item>
            </a-form>
        </div>
    </a-drawer>
</template>

<script lang='ts' setup>
import { defineModel } from 'vue'
import { apiDeviceCreate } from '@/api/device'
import {regionData,codeToText} from "element-china-area-data";
const temp = useTemp()
const local = useLocal()

const show = defineModel('show', { default: false })
const formRef = ref()
const emit = defineEmits(['refresh'])
const form = reactive({
    data: {
        point: "",
        address: 0,
        name: "",
        province: 0,
        groupId:'',
        groupName:'',
        radius: 0,
        type:'',
        district: "",
        districtId:'',
        uid: local.usermsg.id == 3 ? 0 : local.usermsg.id,
        mac:['','','']
    },
    point:{
        list:[] as any,
        loading:false
    },
    loading: false,
})
const submit = async () => {
    const validate= await formRef.value?.validate()
    if(validate) return;
    form.loading = true
    const point =  form.point.list?.find((item:any)=>item.id == form.data.point)
    const { code } = await apiDeviceCreate({
        ...form.data,
        point:point.location,
        address:point.name,
        provinceId:Number(form.data.districtId[0]),
        cityId:Number(form.data.districtId[1]),
        districtId:Number(form.data.districtId[2]),
        province:codeToText[form.data.districtId[0]],
        city:codeToText[form.data.districtId[1]],
        district:codeToText[form.data.districtId[2]],
        groupName:temp.deviceGroupList?.find((item:any)=>item.id == form.data.groupId)?.name,
        uid:local.usermsg.id == 3 ? 0 : local.usermsg.id,
        mac:JSON.stringify(form.data.mac)
    })
    form.loading = false
    if (code != 200) return;
    emit('refresh')
    formRef.value?.resetFields()
    show.value = false
}
// 搜索中心点
const searchPoint = async (keywords:string) => {
    if(!keywords) return;
    form.point.loading = true
    const { code,data } = await apiAmapCityByKeyword({
        keywords
        // cityName: codeToText[form.data.districtId[1]]
    })
    form.point.loading = false
    if (code != 200) return;
    form.point.list = data.list
}
</script>

<style scoped></style>